<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3742145" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe67d;</span>
                <div class="name">样品管理</div>
                <div class="code-name">&amp;#xe67d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe684;</span>
                <div class="name">原料罐</div>
                <div class="code-name">&amp;#xe684;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7cf;</span>
                <div class="name">部门</div>
                <div class="code-name">&amp;#xe7cf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe618;</span>
                <div class="name">辅料</div>
                <div class="code-name">&amp;#xe618;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe632;</span>
                <div class="name">设备台账</div>
                <div class="code-name">&amp;#xe632;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ab;</span>
                <div class="name">工艺流程_0</div>
                <div class="code-name">&amp;#xe7ab;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xea45;</span>
                <div class="name">岗位级别</div>
                <div class="code-name">&amp;#xea45;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe78d;</span>
                <div class="name">工艺定制</div>
                <div class="code-name">&amp;#xe78d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe623;</span>
                <div class="name">生产任务排程</div>
                <div class="code-name">&amp;#xe623;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe695;</span>
                <div class="name">样品管理</div>
                <div class="code-name">&amp;#xe695;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a6;</span>
                <div class="name">废料箱</div>
                <div class="code-name">&amp;#xe6a6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b1;</span>
                <div class="name">废料箱</div>
                <div class="code-name">&amp;#xe6b1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe600;</span>
                <div class="name">产品参数</div>
                <div class="code-name">&amp;#xe600;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe737;</span>
                <div class="name">订单</div>
                <div class="code-name">&amp;#xe737;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe759;</span>
                <div class="name">通知</div>
                <div class="code-name">&amp;#xe759;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe679;</span>
                <div class="name">字典</div>
                <div class="code-name">&amp;#xe679;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe790;</span>
                <div class="name">菜单</div>
                <div class="code-name">&amp;#xe790;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62b;</span>
                <div class="name">采购计划</div>
                <div class="code-name">&amp;#xe62b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62d;</span>
                <div class="name">采购计划</div>
                <div class="code-name">&amp;#xe62d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe669;</span>
                <div class="name">销售订单</div>
                <div class="code-name">&amp;#xe669;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63c;</span>
                <div class="name">辅料</div>
                <div class="code-name">&amp;#xe63c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe630;</span>
                <div class="name">采购订单</div>
                <div class="code-name">&amp;#xe630;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe642;</span>
                <div class="name">客户</div>
                <div class="code-name">&amp;#xe642;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63f;</span>
                <div class="name">配置管理</div>
                <div class="code-name">&amp;#xe63f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe640;</span>
                <div class="name">数据变更</div>
                <div class="code-name">&amp;#xe640;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe887;</span>
                <div class="name">05采购</div>
                <div class="code-name">&amp;#xe887;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe89a;</span>
                <div class="name">25单据-线性</div>
                <div class="code-name">&amp;#xe89a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8c9;</span>
                <div class="name">226角色、群体</div>
                <div class="code-name">&amp;#xe8c9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62c;</span>
                <div class="name">fq_加工</div>
                <div class="code-name">&amp;#xe62c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe89d;</span>
                <div class="name"> 其他订单</div>
                <div class="code-name">&amp;#xe89d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe89e;</span>
                <div class="name"> 日历</div>
                <div class="code-name">&amp;#xe89e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe610;</span>
                <div class="name">加工中心 </div>
                <div class="code-name">&amp;#xe610;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8f2;</span>
                <div class="name"> 修改订单</div>
                <div class="code-name">&amp;#xe8f2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe602;</span>
                <div class="name">称重</div>
                <div class="code-name">&amp;#xe602;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe614;</span>
                <div class="name">成品管理</div>
                <div class="code-name">&amp;#xe614;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe615;</span>
                <div class="name">工艺单</div>
                <div class="code-name">&amp;#xe615;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb67;</span>
                <div class="name">提案审批</div>
                <div class="code-name">&amp;#xeb67;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe611;</span>
                <div class="name">生成代码</div>
                <div class="code-name">&amp;#xe611;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeac8;</span>
                <div class="name">仓库_库存</div>
                <div class="code-name">&amp;#xeac8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb29;</span>
                <div class="name">待办任务</div>
                <div class="code-name">&amp;#xeb29;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xec35;</span>
                <div class="name">消息通知</div>
                <div class="code-name">&amp;#xec35;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xec6d;</span>
                <div class="name">地磁</div>
                <div class="code-name">&amp;#xec6d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe78a;</span>
                <div class="name">118订单、订单查询</div>
                <div class="code-name">&amp;#xe78a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe616;</span>
                <div class="name">Cost-委外费用-1</div>
                <div class="code-name">&amp;#xe616;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe617;</span>
                <div class="name">production-委外生产-1</div>
                <div class="code-name">&amp;#xe617;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62e;</span>
                <div class="name">物料管理</div>
                <div class="code-name">&amp;#xe62e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6bb;</span>
                <div class="name">班组</div>
                <div class="code-name">&amp;#xe6bb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe715;</span>
                <div class="name">文件-日志</div>
                <div class="code-name">&amp;#xe715;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe633;</span>
                <div class="name">客诉管理</div>
                <div class="code-name">&amp;#xe633;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe645;</span>
                <div class="name">采购订单</div>
                <div class="code-name">&amp;#xe645;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62f;</span>
                <div class="name">成品库</div>
                <div class="code-name">&amp;#xe62f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe631;</span>
                <div class="name">车间</div>
                <div class="code-name">&amp;#xe631;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63e;</span>
                <div class="name">BOM</div>
                <div class="code-name">&amp;#xe63e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64d;</span>
                <div class="name">(半)成品MRB评审流程</div>
                <div class="code-name">&amp;#xe64d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe625;</span>
                <div class="name">供应商</div>
                <div class="code-name">&amp;#xe625;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8a8;</span>
                <div class="name">bom</div>
                <div class="code-name">&amp;#xe8a8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8ad;</span>
                <div class="name">播放记录</div>
                <div class="code-name">&amp;#xe8ad;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8ae;</span>
                <div class="name">订单</div>
                <div class="code-name">&amp;#xe8ae;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe668;</span>
                <div class="name">工艺流程图</div>
                <div class="code-name">&amp;#xe668;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66a;</span>
                <div class="name">委外发货</div>
                <div class="code-name">&amp;#xe66a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66b;</span>
                <div class="name">委外到货</div>
                <div class="code-name">&amp;#xe66b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c9;</span>
                <div class="name">工艺</div>
                <div class="code-name">&amp;#xe7c9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7cb;</span>
                <div class="name">gf工艺图</div>
                <div class="code-name">&amp;#xe7cb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe612;</span>
                <div class="name">数据校验-2</div>
                <div class="code-name">&amp;#xe612;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe613;</span>
                <div class="name">工时</div>
                <div class="code-name">&amp;#xe613;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6cc;</span>
                <div class="name">供应商</div>
                <div class="code-name">&amp;#xe6cc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe658;</span>
                <div class="name">菜单栏-采购-采购在途汇总</div>
                <div class="code-name">&amp;#xe658;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe676;</span>
                <div class="name">样品管理</div>
                <div class="code-name">&amp;#xe676;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe694;</span>
                <div class="name">辅料仓</div>
                <div class="code-name">&amp;#xe694;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b5;</span>
                <div class="name">辅料</div>
                <div class="code-name">&amp;#xe6b5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65b;</span>
                <div class="name">生产计划</div>
                <div class="code-name">&amp;#xe65b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe680;</span>
                <div class="name">按键分割线</div>
                <div class="code-name">&amp;#xe680;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe665;</span>
                <div class="name">时间</div>
                <div class="code-name">&amp;#xe665;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ad;</span>
                <div class="name">二维码</div>
                <div class="code-name">&amp;#xe7ad;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69e;</span>
                <div class="name">符号-文本</div>
                <div class="code-name">&amp;#xe69e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe626;</span>
                <div class="name">条形码</div>
                <div class="code-name">&amp;#xe626;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb94;</span>
                <div class="name">表单组件-表格</div>
                <div class="code-name">&amp;#xeb94;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8ba;</span>
                <div class="name">图片</div>
                <div class="code-name">&amp;#xe8ba;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9aa;</span>
                <div class="name">日历,日期</div>
                <div class="code-name">&amp;#xe9aa;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe651;</span>
                <div class="name">搜索</div>
                <div class="code-name">&amp;#xe651;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xea9e;</span>
                <div class="name">简历监控</div>
                <div class="code-name">&amp;#xea9e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xea9f;</span>
                <div class="name">角色用户</div>
                <div class="code-name">&amp;#xea9f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeaa0;</span>
                <div class="name">扩展功能</div>
                <div class="code-name">&amp;#xeaa0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeaab;</span>
                <div class="name">渠道管理</div>
                <div class="code-name">&amp;#xeaab;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeaae;</span>
                <div class="name">筛选题库</div>
                <div class="code-name">&amp;#xeaae;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeaaf;</span>
                <div class="name">审批管理</div>
                <div class="code-name">&amp;#xeaaf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeab6;</span>
                <div class="name">一键导入外部简历</div>
                <div class="code-name">&amp;#xeab6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeab9;</span>
                <div class="name">系统配置</div>
                <div class="code-name">&amp;#xeab9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeabb;</span>
                <div class="name">网站管理</div>
                <div class="code-name">&amp;#xeabb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeabf;</span>
                <div class="name">职位模版</div>
                <div class="code-name">&amp;#xeabf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeac2;</span>
                <div class="name">数据结构-01</div>
                <div class="code-name">&amp;#xeac2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe609;</span>
                <div class="name">数据报表</div>
                <div class="code-name">&amp;#xe609;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60a;</span>
                <div class="name">数据统计</div>
                <div class="code-name">&amp;#xe60a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60b;</span>
                <div class="name">首页</div>
                <div class="code-name">&amp;#xe60b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60c;</span>
                <div class="name">权限管理</div>
                <div class="code-name">&amp;#xe60c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60d;</span>
                <div class="name">系统设置</div>
                <div class="code-name">&amp;#xe60d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60e;</span>
                <div class="name">预警</div>
                <div class="code-name">&amp;#xe60e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60f;</span>
                <div class="name">企业管理</div>
                <div class="code-name">&amp;#xe60f;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff?t=1681971067441') format('woff'),
       url('iconfont.svg?t=1681971067441#iconfont') format('svg');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-yangpinguanli1"></span>
            <div class="name">
              样品管理
            </div>
            <div class="code-name">.icon-yangpinguanli1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yuanliaoguan"></span>
            <div class="name">
              原料罐
            </div>
            <div class="code-name">.icon-yuanliaoguan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bumen"></span>
            <div class="name">
              部门
            </div>
            <div class="code-name">.icon-bumen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fuliao2"></span>
            <div class="name">
              辅料
            </div>
            <div class="code-name">.icon-fuliao2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shebeitaizhang"></span>
            <div class="name">
              设备台账
            </div>
            <div class="code-name">.icon-shebeitaizhang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gongyiliucheng_0"></span>
            <div class="name">
              工艺流程_0
            </div>
            <div class="code-name">.icon-gongyiliucheng_0
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gangweijibie"></span>
            <div class="name">
              岗位级别
            </div>
            <div class="code-name">.icon-gangweijibie
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-ziyuan524"></span>
            <div class="name">
              工艺定制
            </div>
            <div class="code-name">.icon-a-ziyuan524
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-Productiontaskschedule"></span>
            <div class="name">
              生产任务排程
            </div>
            <div class="code-name">.icon-a-Productiontaskschedule
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yangpinguanli2"></span>
            <div class="name">
              样品管理
            </div>
            <div class="code-name">.icon-yangpinguanli2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-feiliaoxiang"></span>
            <div class="name">
              废料箱
            </div>
            <div class="code-name">.icon-feiliaoxiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-feiliaoxiang1"></span>
            <div class="name">
              废料箱
            </div>
            <div class="code-name">.icon-feiliaoxiang1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chanpincanshu"></span>
            <div class="name">
              产品参数
            </div>
            <div class="code-name">.icon-chanpincanshu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dingdan"></span>
            <div class="name">
              订单
            </div>
            <div class="code-name">.icon-dingdan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tongzhi"></span>
            <div class="name">
              通知
            </div>
            <div class="code-name">.icon-tongzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zidian"></span>
            <div class="name">
              字典
            </div>
            <div class="code-name">.icon-zidian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-caidan"></span>
            <div class="name">
              菜单
            </div>
            <div class="code-name">.icon-caidan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-order-plan"></span>
            <div class="name">
              采购计划
            </div>
            <div class="code-name">.icon-icon-order-plan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-caigoujihua"></span>
            <div class="name">
              采购计划
            </div>
            <div class="code-name">.icon-caigoujihua
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiaoshoudingdan"></span>
            <div class="name">
              销售订单
            </div>
            <div class="code-name">.icon-xiaoshoudingdan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fuliao"></span>
            <div class="name">
              辅料
            </div>
            <div class="code-name">.icon-fuliao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-caigoudingdan"></span>
            <div class="name">
              采购订单
            </div>
            <div class="code-name">.icon-caigoudingdan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kehu"></span>
            <div class="name">
              客户
            </div>
            <div class="code-name">.icon-kehu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-peizhiguanli"></span>
            <div class="name">
              配置管理
            </div>
            <div class="code-name">.icon-peizhiguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shujubiangeng"></span>
            <div class="name">
              数据变更
            </div>
            <div class="code-name">.icon-shujubiangeng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-caigou"></span>
            <div class="name">
              05采购
            </div>
            <div class="code-name">.icon-caigou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-danju-xianxing"></span>
            <div class="name">
              25单据-线性
            </div>
            <div class="code-name">.icon-danju-xianxing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiaosequnti"></span>
            <div class="name">
              226角色、群体
            </div>
            <div class="code-name">.icon-jiaosequnti
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fq_jiagong"></span>
            <div class="name">
              fq_加工
            </div>
            <div class="code-name">.icon-fq_jiagong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qitadingdan"></span>
            <div class="name">
               其他订单
            </div>
            <div class="code-name">.icon-qitadingdan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-rili"></span>
            <div class="name">
               日历
            </div>
            <div class="code-name">.icon-rili
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiagongzhongxin"></span>
            <div class="name">
              加工中心 
            </div>
            <div class="code-name">.icon-jiagongzhongxin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiugaidingdan"></span>
            <div class="name">
               修改订单
            </div>
            <div class="code-name">.icon-xiugaidingdan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chengzhong"></span>
            <div class="name">
              称重
            </div>
            <div class="code-name">.icon-chengzhong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chengpinguanli"></span>
            <div class="name">
              成品管理
            </div>
            <div class="code-name">.icon-chengpinguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gongyidan"></span>
            <div class="name">
              工艺单
            </div>
            <div class="code-name">.icon-gongyidan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tianshenpi"></span>
            <div class="name">
              提案审批
            </div>
            <div class="code-name">.icon-tianshenpi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shengchengdaima"></span>
            <div class="name">
              生成代码
            </div>
            <div class="code-name">.icon-shengchengdaima
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cangku_kucun"></span>
            <div class="name">
              仓库_库存
            </div>
            <div class="code-name">.icon-cangku_kucun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-daibanrenwu"></span>
            <div class="name">
              待办任务
            </div>
            <div class="code-name">.icon-daibanrenwu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiaoxitongzhi"></span>
            <div class="name">
              消息通知
            </div>
            <div class="code-name">.icon-xiaoxitongzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dici"></span>
            <div class="name">
              地磁
            </div>
            <div class="code-name">.icon-dici
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dingdandingdanchaxun"></span>
            <div class="name">
              118订单、订单查询
            </div>
            <div class="code-name">.icon-dingdandingdanchaxun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-weiwaifeiyong"></span>
            <div class="name">
              Cost-委外费用-1
            </div>
            <div class="code-name">.icon-weiwaifeiyong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-weiwaishengchan"></span>
            <div class="name">
              production-委外生产-1
            </div>
            <div class="code-name">.icon-weiwaishengchan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wuliaoguanli"></span>
            <div class="name">
              物料管理
            </div>
            <div class="code-name">.icon-wuliaoguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-banzu"></span>
            <div class="name">
              班组
            </div>
            <div class="code-name">.icon-banzu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wj-rz"></span>
            <div class="name">
              文件-日志
            </div>
            <div class="code-name">.icon-wj-rz
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kesuguanli-"></span>
            <div class="name">
              客诉管理
            </div>
            <div class="code-name">.icon-kesuguanli-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-caigoudingdan-"></span>
            <div class="name">
              采购订单
            </div>
            <div class="code-name">.icon-caigoudingdan-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tubiao_chengpinku"></span>
            <div class="name">
              成品库
            </div>
            <div class="code-name">.icon-tubiao_chengpinku
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tubiao_chejian"></span>
            <div class="name">
              车间
            </div>
            <div class="code-name">.icon-tubiao_chejian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-BOM"></span>
            <div class="name">
              BOM
            </div>
            <div class="code-name">.icon-BOM
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-banchengpinMRBpingshenliucheng"></span>
            <div class="name">
              (半)成品MRB评审流程
            </div>
            <div class="code-name">.icon-banchengpinMRBpingshenliucheng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gongyingshang"></span>
            <div class="name">
              供应商
            </div>
            <div class="code-name">.icon-gongyingshang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bom"></span>
            <div class="name">
              bom
            </div>
            <div class="code-name">.icon-bom
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bofangjilu"></span>
            <div class="name">
              播放记录
            </div>
            <div class="code-name">.icon-bofangjilu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dingdan1"></span>
            <div class="name">
              订单
            </div>
            <div class="code-name">.icon-dingdan1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gongyiliuchengtu"></span>
            <div class="name">
              工艺流程图
            </div>
            <div class="code-name">.icon-gongyiliuchengtu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-weiwaifahuo"></span>
            <div class="name">
              委外发货
            </div>
            <div class="code-name">.icon-weiwaifahuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-weiwaidaohuo"></span>
            <div class="name">
              委外到货
            </div>
            <div class="code-name">.icon-weiwaidaohuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-guangzhougufeiicon-"></span>
            <div class="name">
              工艺
            </div>
            <div class="code-name">.icon-guangzhougufeiicon-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gfgongyitu"></span>
            <div class="name">
              gf工艺图
            </div>
            <div class="code-name">.icon-gfgongyitu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shujuxiaoyan-"></span>
            <div class="name">
              数据校验-2
            </div>
            <div class="code-name">.icon-shujuxiaoyan-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gongshi"></span>
            <div class="name">
              工时
            </div>
            <div class="code-name">.icon-gongshi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gongyingshang1"></span>
            <div class="name">
              供应商
            </div>
            <div class="code-name">.icon-gongyingshang1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-caidanlan-caigou-caigouzaituhuizong"></span>
            <div class="name">
              菜单栏-采购-采购在途汇总
            </div>
            <div class="code-name">.icon-caidanlan-caigou-caigouzaituhuizong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yangpinguanli"></span>
            <div class="name">
              样品管理
            </div>
            <div class="code-name">.icon-yangpinguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fuliaocang"></span>
            <div class="name">
              辅料仓
            </div>
            <div class="code-name">.icon-fuliaocang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fuliao1"></span>
            <div class="name">
              辅料
            </div>
            <div class="code-name">.icon-fuliao1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shengchanjihua"></span>
            <div class="name">
              生产计划
            </div>
            <div class="code-name">.icon-shengchanjihua
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-anjianfengexian"></span>
            <div class="name">
              按键分割线
            </div>
            <div class="code-name">.icon-anjianfengexian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shijian"></span>
            <div class="name">
              时间
            </div>
            <div class="code-name">.icon-shijian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-erweima"></span>
            <div class="name">
              二维码
            </div>
            <div class="code-name">.icon-erweima
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wenben"></span>
            <div class="name">
              符号-文本
            </div>
            <div class="code-name">.icon-wenben
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tiaoxingma"></span>
            <div class="name">
              条形码
            </div>
            <div class="code-name">.icon-tiaoxingma
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-biaodanzujian-biaoge"></span>
            <div class="name">
              表单组件-表格
            </div>
            <div class="code-name">.icon-biaodanzujian-biaoge
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tupian"></span>
            <div class="name">
              图片
            </div>
            <div class="code-name">.icon-tupian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-calendar-v2-full"></span>
            <div class="name">
              日历,日期
            </div>
            <div class="code-name">.icon-calendar-v2-full
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sousuo"></span>
            <div class="name">
              搜索
            </div>
            <div class="code-name">.icon-sousuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jianlijiankong"></span>
            <div class="name">
              简历监控
            </div>
            <div class="code-name">.icon-jianlijiankong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiaoseyonghu"></span>
            <div class="name">
              角色用户
            </div>
            <div class="code-name">.icon-jiaoseyonghu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kuozhangongneng"></span>
            <div class="name">
              扩展功能
            </div>
            <div class="code-name">.icon-kuozhangongneng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qudaoguanli"></span>
            <div class="name">
              渠道管理
            </div>
            <div class="code-name">.icon-qudaoguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shaixuantiku"></span>
            <div class="name">
              筛选题库
            </div>
            <div class="code-name">.icon-shaixuantiku
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shenpiguanli"></span>
            <div class="name">
              审批管理
            </div>
            <div class="code-name">.icon-shenpiguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yijiandaoruwaibujianli"></span>
            <div class="name">
              一键导入外部简历
            </div>
            <div class="code-name">.icon-yijiandaoruwaibujianli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xitongpeizhi"></span>
            <div class="name">
              系统配置
            </div>
            <div class="code-name">.icon-xitongpeizhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wangzhanguanli"></span>
            <div class="name">
              网站管理
            </div>
            <div class="code-name">.icon-wangzhanguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhiweimoban"></span>
            <div class="name">
              职位模版
            </div>
            <div class="code-name">.icon-zhiweimoban
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shujujiegou-01"></span>
            <div class="name">
              数据结构-01
            </div>
            <div class="code-name">.icon-shujujiegou-01
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shujubaobiao"></span>
            <div class="name">
              数据报表
            </div>
            <div class="code-name">.icon-shujubaobiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shujutongji"></span>
            <div class="name">
              数据统计
            </div>
            <div class="code-name">.icon-shujutongji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shouye"></span>
            <div class="name">
              首页
            </div>
            <div class="code-name">.icon-shouye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-quanxianguanli"></span>
            <div class="name">
              权限管理
            </div>
            <div class="code-name">.icon-quanxianguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xitongshezhi"></span>
            <div class="name">
              系统设置
            </div>
            <div class="code-name">.icon-xitongshezhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yujing"></span>
            <div class="name">
              预警
            </div>
            <div class="code-name">.icon-yujing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qiyeguanli"></span>
            <div class="name">
              企业管理
            </div>
            <div class="code-name">.icon-qiyeguanli
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yangpinguanli1"></use>
                </svg>
                <div class="name">样品管理</div>
                <div class="code-name">#icon-yangpinguanli1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yuanliaoguan"></use>
                </svg>
                <div class="name">原料罐</div>
                <div class="code-name">#icon-yuanliaoguan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bumen"></use>
                </svg>
                <div class="name">部门</div>
                <div class="code-name">#icon-bumen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fuliao2"></use>
                </svg>
                <div class="name">辅料</div>
                <div class="code-name">#icon-fuliao2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shebeitaizhang"></use>
                </svg>
                <div class="name">设备台账</div>
                <div class="code-name">#icon-shebeitaizhang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gongyiliucheng_0"></use>
                </svg>
                <div class="name">工艺流程_0</div>
                <div class="code-name">#icon-gongyiliucheng_0</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gangweijibie"></use>
                </svg>
                <div class="name">岗位级别</div>
                <div class="code-name">#icon-gangweijibie</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-ziyuan524"></use>
                </svg>
                <div class="name">工艺定制</div>
                <div class="code-name">#icon-a-ziyuan524</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-Productiontaskschedule"></use>
                </svg>
                <div class="name">生产任务排程</div>
                <div class="code-name">#icon-a-Productiontaskschedule</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yangpinguanli2"></use>
                </svg>
                <div class="name">样品管理</div>
                <div class="code-name">#icon-yangpinguanli2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-feiliaoxiang"></use>
                </svg>
                <div class="name">废料箱</div>
                <div class="code-name">#icon-feiliaoxiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-feiliaoxiang1"></use>
                </svg>
                <div class="name">废料箱</div>
                <div class="code-name">#icon-feiliaoxiang1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chanpincanshu"></use>
                </svg>
                <div class="name">产品参数</div>
                <div class="code-name">#icon-chanpincanshu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dingdan"></use>
                </svg>
                <div class="name">订单</div>
                <div class="code-name">#icon-dingdan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tongzhi"></use>
                </svg>
                <div class="name">通知</div>
                <div class="code-name">#icon-tongzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zidian"></use>
                </svg>
                <div class="name">字典</div>
                <div class="code-name">#icon-zidian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-caidan"></use>
                </svg>
                <div class="name">菜单</div>
                <div class="code-name">#icon-caidan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-order-plan"></use>
                </svg>
                <div class="name">采购计划</div>
                <div class="code-name">#icon-icon-order-plan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-caigoujihua"></use>
                </svg>
                <div class="name">采购计划</div>
                <div class="code-name">#icon-caigoujihua</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiaoshoudingdan"></use>
                </svg>
                <div class="name">销售订单</div>
                <div class="code-name">#icon-xiaoshoudingdan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fuliao"></use>
                </svg>
                <div class="name">辅料</div>
                <div class="code-name">#icon-fuliao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-caigoudingdan"></use>
                </svg>
                <div class="name">采购订单</div>
                <div class="code-name">#icon-caigoudingdan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kehu"></use>
                </svg>
                <div class="name">客户</div>
                <div class="code-name">#icon-kehu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-peizhiguanli"></use>
                </svg>
                <div class="name">配置管理</div>
                <div class="code-name">#icon-peizhiguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shujubiangeng"></use>
                </svg>
                <div class="name">数据变更</div>
                <div class="code-name">#icon-shujubiangeng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-caigou"></use>
                </svg>
                <div class="name">05采购</div>
                <div class="code-name">#icon-caigou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-danju-xianxing"></use>
                </svg>
                <div class="name">25单据-线性</div>
                <div class="code-name">#icon-danju-xianxing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiaosequnti"></use>
                </svg>
                <div class="name">226角色、群体</div>
                <div class="code-name">#icon-jiaosequnti</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fq_jiagong"></use>
                </svg>
                <div class="name">fq_加工</div>
                <div class="code-name">#icon-fq_jiagong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qitadingdan"></use>
                </svg>
                <div class="name"> 其他订单</div>
                <div class="code-name">#icon-qitadingdan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-rili"></use>
                </svg>
                <div class="name"> 日历</div>
                <div class="code-name">#icon-rili</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiagongzhongxin"></use>
                </svg>
                <div class="name">加工中心 </div>
                <div class="code-name">#icon-jiagongzhongxin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiugaidingdan"></use>
                </svg>
                <div class="name"> 修改订单</div>
                <div class="code-name">#icon-xiugaidingdan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chengzhong"></use>
                </svg>
                <div class="name">称重</div>
                <div class="code-name">#icon-chengzhong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chengpinguanli"></use>
                </svg>
                <div class="name">成品管理</div>
                <div class="code-name">#icon-chengpinguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gongyidan"></use>
                </svg>
                <div class="name">工艺单</div>
                <div class="code-name">#icon-gongyidan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tianshenpi"></use>
                </svg>
                <div class="name">提案审批</div>
                <div class="code-name">#icon-tianshenpi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shengchengdaima"></use>
                </svg>
                <div class="name">生成代码</div>
                <div class="code-name">#icon-shengchengdaima</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cangku_kucun"></use>
                </svg>
                <div class="name">仓库_库存</div>
                <div class="code-name">#icon-cangku_kucun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-daibanrenwu"></use>
                </svg>
                <div class="name">待办任务</div>
                <div class="code-name">#icon-daibanrenwu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiaoxitongzhi"></use>
                </svg>
                <div class="name">消息通知</div>
                <div class="code-name">#icon-xiaoxitongzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dici"></use>
                </svg>
                <div class="name">地磁</div>
                <div class="code-name">#icon-dici</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dingdandingdanchaxun"></use>
                </svg>
                <div class="name">118订单、订单查询</div>
                <div class="code-name">#icon-dingdandingdanchaxun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-weiwaifeiyong"></use>
                </svg>
                <div class="name">Cost-委外费用-1</div>
                <div class="code-name">#icon-weiwaifeiyong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-weiwaishengchan"></use>
                </svg>
                <div class="name">production-委外生产-1</div>
                <div class="code-name">#icon-weiwaishengchan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wuliaoguanli"></use>
                </svg>
                <div class="name">物料管理</div>
                <div class="code-name">#icon-wuliaoguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-banzu"></use>
                </svg>
                <div class="name">班组</div>
                <div class="code-name">#icon-banzu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wj-rz"></use>
                </svg>
                <div class="name">文件-日志</div>
                <div class="code-name">#icon-wj-rz</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kesuguanli-"></use>
                </svg>
                <div class="name">客诉管理</div>
                <div class="code-name">#icon-kesuguanli-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-caigoudingdan-"></use>
                </svg>
                <div class="name">采购订单</div>
                <div class="code-name">#icon-caigoudingdan-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tubiao_chengpinku"></use>
                </svg>
                <div class="name">成品库</div>
                <div class="code-name">#icon-tubiao_chengpinku</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tubiao_chejian"></use>
                </svg>
                <div class="name">车间</div>
                <div class="code-name">#icon-tubiao_chejian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-BOM"></use>
                </svg>
                <div class="name">BOM</div>
                <div class="code-name">#icon-BOM</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-banchengpinMRBpingshenliucheng"></use>
                </svg>
                <div class="name">(半)成品MRB评审流程</div>
                <div class="code-name">#icon-banchengpinMRBpingshenliucheng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gongyingshang"></use>
                </svg>
                <div class="name">供应商</div>
                <div class="code-name">#icon-gongyingshang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bom"></use>
                </svg>
                <div class="name">bom</div>
                <div class="code-name">#icon-bom</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bofangjilu"></use>
                </svg>
                <div class="name">播放记录</div>
                <div class="code-name">#icon-bofangjilu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dingdan1"></use>
                </svg>
                <div class="name">订单</div>
                <div class="code-name">#icon-dingdan1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gongyiliuchengtu"></use>
                </svg>
                <div class="name">工艺流程图</div>
                <div class="code-name">#icon-gongyiliuchengtu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-weiwaifahuo"></use>
                </svg>
                <div class="name">委外发货</div>
                <div class="code-name">#icon-weiwaifahuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-weiwaidaohuo"></use>
                </svg>
                <div class="name">委外到货</div>
                <div class="code-name">#icon-weiwaidaohuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guangzhougufeiicon-"></use>
                </svg>
                <div class="name">工艺</div>
                <div class="code-name">#icon-guangzhougufeiicon-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gfgongyitu"></use>
                </svg>
                <div class="name">gf工艺图</div>
                <div class="code-name">#icon-gfgongyitu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shujuxiaoyan-"></use>
                </svg>
                <div class="name">数据校验-2</div>
                <div class="code-name">#icon-shujuxiaoyan-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gongshi"></use>
                </svg>
                <div class="name">工时</div>
                <div class="code-name">#icon-gongshi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gongyingshang1"></use>
                </svg>
                <div class="name">供应商</div>
                <div class="code-name">#icon-gongyingshang1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-caidanlan-caigou-caigouzaituhuizong"></use>
                </svg>
                <div class="name">菜单栏-采购-采购在途汇总</div>
                <div class="code-name">#icon-caidanlan-caigou-caigouzaituhuizong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yangpinguanli"></use>
                </svg>
                <div class="name">样品管理</div>
                <div class="code-name">#icon-yangpinguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fuliaocang"></use>
                </svg>
                <div class="name">辅料仓</div>
                <div class="code-name">#icon-fuliaocang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fuliao1"></use>
                </svg>
                <div class="name">辅料</div>
                <div class="code-name">#icon-fuliao1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shengchanjihua"></use>
                </svg>
                <div class="name">生产计划</div>
                <div class="code-name">#icon-shengchanjihua</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-anjianfengexian"></use>
                </svg>
                <div class="name">按键分割线</div>
                <div class="code-name">#icon-anjianfengexian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shijian"></use>
                </svg>
                <div class="name">时间</div>
                <div class="code-name">#icon-shijian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-erweima"></use>
                </svg>
                <div class="name">二维码</div>
                <div class="code-name">#icon-erweima</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wenben"></use>
                </svg>
                <div class="name">符号-文本</div>
                <div class="code-name">#icon-wenben</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tiaoxingma"></use>
                </svg>
                <div class="name">条形码</div>
                <div class="code-name">#icon-tiaoxingma</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-biaodanzujian-biaoge"></use>
                </svg>
                <div class="name">表单组件-表格</div>
                <div class="code-name">#icon-biaodanzujian-biaoge</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tupian"></use>
                </svg>
                <div class="name">图片</div>
                <div class="code-name">#icon-tupian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-calendar-v2-full"></use>
                </svg>
                <div class="name">日历,日期</div>
                <div class="code-name">#icon-calendar-v2-full</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sousuo"></use>
                </svg>
                <div class="name">搜索</div>
                <div class="code-name">#icon-sousuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jianlijiankong"></use>
                </svg>
                <div class="name">简历监控</div>
                <div class="code-name">#icon-jianlijiankong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiaoseyonghu"></use>
                </svg>
                <div class="name">角色用户</div>
                <div class="code-name">#icon-jiaoseyonghu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kuozhangongneng"></use>
                </svg>
                <div class="name">扩展功能</div>
                <div class="code-name">#icon-kuozhangongneng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qudaoguanli"></use>
                </svg>
                <div class="name">渠道管理</div>
                <div class="code-name">#icon-qudaoguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shaixuantiku"></use>
                </svg>
                <div class="name">筛选题库</div>
                <div class="code-name">#icon-shaixuantiku</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shenpiguanli"></use>
                </svg>
                <div class="name">审批管理</div>
                <div class="code-name">#icon-shenpiguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yijiandaoruwaibujianli"></use>
                </svg>
                <div class="name">一键导入外部简历</div>
                <div class="code-name">#icon-yijiandaoruwaibujianli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xitongpeizhi"></use>
                </svg>
                <div class="name">系统配置</div>
                <div class="code-name">#icon-xitongpeizhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wangzhanguanli"></use>
                </svg>
                <div class="name">网站管理</div>
                <div class="code-name">#icon-wangzhanguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhiweimoban"></use>
                </svg>
                <div class="name">职位模版</div>
                <div class="code-name">#icon-zhiweimoban</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shujujiegou-01"></use>
                </svg>
                <div class="name">数据结构-01</div>
                <div class="code-name">#icon-shujujiegou-01</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shujubaobiao"></use>
                </svg>
                <div class="name">数据报表</div>
                <div class="code-name">#icon-shujubaobiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shujutongji"></use>
                </svg>
                <div class="name">数据统计</div>
                <div class="code-name">#icon-shujutongji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shouye"></use>
                </svg>
                <div class="name">首页</div>
                <div class="code-name">#icon-shouye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-quanxianguanli"></use>
                </svg>
                <div class="name">权限管理</div>
                <div class="code-name">#icon-quanxianguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xitongshezhi"></use>
                </svg>
                <div class="name">系统设置</div>
                <div class="code-name">#icon-xitongshezhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yujing"></use>
                </svg>
                <div class="name">预警</div>
                <div class="code-name">#icon-yujing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qiyeguanli"></use>
                </svg>
                <div class="name">企业管理</div>
                <div class="code-name">#icon-qiyeguanli</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
